<template>

    <head>
        <meta name="referrer" content="no-referrer" />
    </head>
    <div class="flex items-center justify-center">
        <div class="w-full px-2" style="max-width:1440px;">
            <div id="movie-list" class="p-2 grid grid-cols-2 md:grid-cols-4 lg:grid-cols-6 gap-4">
                <div class="movie" v-for="movie in info.results" :key="movie.id">
                    <a :href="'movie/'+ movie.id"> 
                    <div class="relative">
                        <div v-if="movie.image_url" class="cover">
                            <img :src=" movie.image_url "  alt="" class="rounded h-full w-full">
                        </div>
                        <div v-else>
                            <img src="@/assets/images/bg.png" alt="" class="rounded h-full w-full">
                        </div>
                        <div v-if="movie.is_top" class="rounded absolute top-0 bg-purple-600 px-1 text-sm">
                            置顶
                        </div>
                        <div v-if="movie.quality === 1" class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm ">
                            720p
                        </div>
                        <div v-else-if="movie.quality === 2" class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm ">
                            1080p
                        </div>
                        <div v-else-if="movie.quality === 3" class="rounded absolute bottom-0 right-0 bg-blue-500 px-1 text-sm ">
                            4k
                        </div>
                    </div>
                    <p> {{ movie.movie_name }}({{movie.release_year}})</p>
                    <p class="text-sm text-primary-200">{{movie.language}}</p>
                    </a>
                </div>
            </div>  
        </div>
      </div>

      <Page :info="info"></Page>

      <div>
        <p>到达末尾了nie</p>
      </div>
</template>



<script>
import axios from 'axios'
import Page from './Page.vue'

export default {
    name: "MovieList",

    components:{
        Page
    },

    data: function (){
        return {
            info:''
        }
    },
    mounted() {
        // 发送请求
        this.get_movie_data()
    },

    methods :{
        get_movie_data: function(){
            let url = "/api/movie"
            const page = Number(this.$route.query.page);
            const search = this.$route.query.search;
            const category_id = this.$route.query.category_id;
            const region = this.$route.query.region;


            const params = new URLSearchParams();
            if (page){
                params.append("page",page)  
            }
            if (search){
                params.append("movie_name",search)      // 名字，变量值。api/movie?movie_name
            }
            if (category_id){
                params.append("category_id",category_id)  
            }
            if (region){
                params.append("region",region)  
            }
            url = url + "?" + params.toString()


            axios
            .get(url)
            .then(response => { this.info = response.data}
            
            )
            .catch(error=>{
                console.log(error)
            })
        }
    },
    watch:{
        // 监听路由的变化
        $route() {
            this.get_movie_data()
        }
    }
}

</script>


